<template>
	<div class="home">
		<!-- <van-nav-bar>
			<template #title>
				<img
					style="width: auto;height: 0.78125rem;display: block;"
					v-if="navLogo" :src="navLogo"
				/>
			</template>
			<template #right>
				<div style="color: #000000; " @click="goOther(0)"><span style="font-size: 14px;">Language</span></div>
			</template>
		</van-nav-bar> -->
		<div class="content">
			<div class="bannerBox">
				<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators="false">
					<van-swipe-item v-for="(item, index) in bannerList" :key="index" class="swipeItem">
						<van-image width="100%" height="170" :src="$basePath + item.img" />
					</van-swipe-item>
				</van-swipe>
			</div>
			<!-- 			<div class="qiandao" v-if="config.is_sign == 0" @click="signIn">{{ $t('每日签到') }}</div>
			<div class="qiandao" v-if="config.is_sign == 1">{{ $t('已签到') }}</div> -->

			<div class="swipeTextInner">
				<img src="../assets/images/newImg/laba.png" alt="" />
				<!-- <marquee behavior="up" scrolldelay="200" >
  <van-swipe
	vertical
	class="notice-swipe"
	:autoplay="1000"
	:show-indicators="true"
  >
	<van-swipe-item class="swipeItem">
			<span  v-for="(news , index) in newsLastDetail" @click="goAnother(news.help_id)">{{news.title}}&nbsp;&nbsp;&nbsp;</span>
			</van-swipe-item>
  </van-swipe>
		 </marquee> -->
				<marquee behavior="down" loop="-1" scrolldelay="100" class="ml32 bcolor"
					style="color: #fff;font-size: 10px;">
					<span v-for="(news, index) in newsLastDetail"
						@click="goAnother(news.help_id)">{{ news.title }}&nbsp;&nbsp;&nbsp;</span>
				</marquee>
				<!-- <img @click="goOther(6)" src="../assets/images/icon08.png" alt="" /> -->
			</div>
			<!-- <div class="topInner2" @click="goOther(4)" >
</div> -->

			<div class="topInner" @click="goOther(7)">
				<div class="topInnerBox">
					<div class="topInnerLeft">
						<img src="../../src/assets/images/newImg/index_charge.png" alt="">
						<div class="">
							<p class="title">{{ $t('快捷充币') }}</p>
							<p class="note">
								<!-- {{ $t('支持') }}  <br /> -->
								{{ $t('银行转账和多种方式选择') }}
							</p>
						</div>
					</div>
					<img src="../../src/assets/images/newImg/yuanjiantou.png" alt="">
				</div>
			</div>
			<!-- <div class="linkBox">
				<div class="itemBox" v-for="(item, index) in linkList" :key="index" @click="goOther(item.value)">
					<img :src="item.url" />
					<p>{{ item.name }}</p>
				</div>
			</div>

			<div class="dataBox">
				<div class="contentInner">
					<div class="subInner">
						<div :class="['item']" v-for="(item, index) in symbolsArrayTops" :key="index"
							@click="goDetail(item)">
							<p class="title" v-if="$i18n.locale == 'zh'">
								{{ item.cn_title }}
							</p>
							<p class="title" v-else>{{ item.note }}</p>
							<p :class="['number', futures[item.symbol].ratio > 0 ? 'green' : '']"
								v-if="futures[item.symbol]">
								{{ futures[item.symbol].close }}
							</p>
							<p :class="['text', futures[item.symbol].ratio > 0 ? 'green' : '']"
								v-if="futures[item.symbol] && futures[item.symbol].ratio">
								{{ futures[item.symbol].increase }}[{{ futures[item.symbol].ratio > 0 ? '+' : '' }}{{ futures[item.symbol].ratio }}]
							</p>
						</div>
					</div>
				</div>
			</div> -->
			<div class="itemInnerList">
				<div class="itemInnerListIt" v-for="(item, index) in symbolsArrayTops" :key="index"
					@click="goDetail(item)">
					<div class="dkshfImg">
						<img :src="item.img" alt="">
					</div>
					<div class="itemInnerListItone">
						<p v-if="$i18n.locale == 'zh'">
							{{ item.cn_title }}
						</p>
						<p v-else>{{ item.note }}</p>
					</div>
					<div class="itemInnerListIttow">
						<p>{{ item.name }}</p>
						<p :class="['number', futures[item.symbol].ratio > 0 ? 'green' : '']"
							v-if="futures[item.symbol]">
							{{ futures[item.symbol].close }}
						</p>
						<p :class="['text', futures[item.symbol].ratio > 0 ? 'green' : '']"
							v-if="futures[item.symbol] && futures[item.symbol].ratio">
							{{ futures[item.symbol].increase }}[{{ futures[item.symbol].ratio > 0 ? '+' : '' }}{{ futures[item.symbol].ratio }}]
						</p>
					</div>
				</div>

				<!-- 	<div class="leftInner" v-if="futures[item].is_ft === 0">
					<span v-if="futures[item]">
						{{ String(String(futures[item]).split('.')[1]).slice(0, -4).toUpperCase() }}
					</span>
					/USD
				</div>
				<div class="leftInner" v-else>
					<span v-if="futures[item].name">
						<span v-if="$i18n.locale == 'zh'">
							{{ futures[item].name }}
						</span>
						<span v-else>
							{{ futures[item].ename || futures[item].name }}
						</span>
						<p>{{ futures[item].code }}</p>
					</span>
				</div>
				<div class="rightInner">
					<p :class="['note', futures[item].ratio > 0 ? 'green' : 'red']"
						v-if="futures[item] && futures[item].close">
						{{ futures[item].close }}
					</p>
					<p :class="['num', futures[item].ratio > 0 ? '' : 'red']"
						v-if="futures[item] && futures[item].ratio">
						{{ futures[item].ratio > 0 ? '+' : '' }}{{ futures[item].ratio }}%</p>
				</div> -->
			</div>

			<!-- <van-tabs v-model="makeListNum" title-inactive-color="#bac1d7" title-active-color="#000" color="#588bf7"
				@click="getClickFunc" @change="getClickFunc">
				<van-tab :title="$t('涨幅榜')" class="innerTabBox" ref="tab01">
					<div class="itemInner" style="background-color: #f6faff;">
						<div class="leftInner" style="color: #a1a8bb;">{{ $t('名称') }}</div>
						<div class="rightInner">
							<p class="note" style="color: #a1a8bb;font-size: 0.4375rem;font-weight: normal;">
								{{ $t('最新价') }}</p>
							<p class="num" style="background-color: transparent;color: #a1a8bb;font-size: 0.4375rem;">
								{{ $t('涨跌幅') }}</p>
						</div>
					</div>
					<div v-if="!futuresKeys[1]">
						<div style="margin-top: 15%;">
							<van-loading type="spinner" color="#1989fa" :vertical="true">
								{{ $t('加载中') }}...
							</van-loading>
						</div>
					</div>
					<div class="itemInner" v-for="(item, index) in futuresKeys" :key="index" @click="goDetail2(item)">
						<div class="leftInner" v-if="futures[item].is_ft === 0">
							<span v-if="futures[item]">
								{{ String(String(futures[item]).split('.')[1]).slice(0, -4).toUpperCase() }}
							</span>
							/USD
						</div>
						<div class="leftInner" v-else>
							<span v-if="futures[item].name">
								<span v-if="$i18n.locale == 'zh'">
									{{ futures[item].name }}
								</span>
								<span v-else>
									{{ futures[item].ename || futures[item].name }}
								</span>
								<p>{{ futures[item].code }}</p>
							</span>
						</div>
						<div class="rightInner">
							<p :class="['note', futures[item].ratio > 0 ? 'green' : 'red']"
								v-if="futures[item] && futures[item].close">
								{{ futures[item].close }}
							</p>
							<p :class="['num', futures[item].ratio > 0 ? '' : 'red']"
								v-if="futures[item] && futures[item].ratio">
								{{ futures[item].ratio > 0 ? '+' : '' }}{{ futures[item].ratio }}%</p>
						</div>
					</div>
				</van-tab>

				<van-tab :title="$t('涨跌榜')" class="innerTabBox subTabBox">
					<div class="itemInner" style="background-color: #f6faff;">
						<div class="leftInner" style="color: #a1a8bb;">{{ $t('名称') }}</div>
						<div class="rightInner">
							<p class="note" style="color: #a1a8bb;font-size: 0.4375rem;font-weight: normal;">
								{{ $t('最新价') }}</p>
							<p class="num" style="background-color: transparent;color: #a1a8bb;font-size: 0.4375rem;">
								{{ $t('涨跌额') }}</p>
						</div>
					</div>
					<div v-if="!futuresIncreaseKeys[1]">
						<div style="margin-top: 15%;">
							<van-loading type="spinner" color="#1989fa" :vertical="true">
								{{ $t('加载中') }}...
							</van-loading>
						</div>
					</div>
					<div class="itemInner" v-for="(item, index) in futuresIncreaseKeys" :key="index"
						@click="goDetail2(item)">
						<div class="leftInner" v-if="futures[item].is_ft === 0">
							<span v-if="futures[item]">
								{{ String(String(futures[item]).split('.')[1]).slice(0, -4).toUpperCase() }}
							</span>
							/USD
						</div>
						<div class="leftInner" v-else>
							<span v-if="futures[item].name">
								<span v-if="$i18n.locale == 'zh'">
									{{ futures[item].name }}
								</span>
								<span v-else>
									{{ futures[item].ename || futures[item].name }}
								</span>
								<p>{{ futures[item].code }}</p>
							</span>
						</div>
						<div class="rightInner">
							<p :class="['note', futures[item].ratio > 0 ? 'green' : 'red']"
								v-if="futures[item] && futures[item].close">
								{{ futures[item].close }}
							</p>
							<p :class="['num', futures[item].increase > 0 ? '' : 'red']"
								v-if="futures[item] && futures[item].increase">
								{{ futures[item].increase > 0 ? '+' : '' }}{{ futures[item].increase }}</p>
						</div>
					</div>
				</van-tab>
			</van-tabs> -->
		</div>
		<tabBar :active="0"></tabBar>
	</div>
</template>

<script>
	import tabBar from '@/components/tabBar.vue';
	// import navBar from "@/components/navBar.vue";
	import {
		NavBar
	} from 'vant';
	export default {
		name: 'Home',
		components: {
			NavBar,
			tabBar
		},
		data() {
			return {
				sort: 0,
				futures: [],
				futuresKeys: [],
				futuresIncreaseKeys: [],
				futuresRatio: [],
				futuresIncrease: [],
				bannerList: [],
				linkList: [
					//      {
					//        url: require("../assets/images/icodown.png"),
					//        name: this.$t("下载APP"),
					//        value: 100,
					//      },
					{
						url: require('../assets/images/icon02.png'),
						name: this.$t('在线客服'),
						value: 1
					},
					{
						url: require('../assets/images/icon03.png'),
						name: this.$t('帮助中心'),
						value: 2
					},
					{
						url: require('../assets/images/icon04.png'),
						name: this.$t('市场交易'),
						value: 3
					}
					//     {
					//       url: require("../assets/images/icon05.png"),
					//       name: this.$t("新币申购"),
					//       value: 4,
					//     },
					//    {
					//       url: require("../assets/images/icon06.png"),
					//       name: this.$t("合作财富"),
					//       value: 5,
					//     },
				],
				// 币种列表
				symbolsArray: [{
						symbol: 'btcusdt',
						title: 'BTC/USDT'
					},
					{
						symbol: 'ethusdt',
						title: 'ETH/USDT'
					},
					{
						symbol: 'eosusdt',
						title: 'EOS/USDT'
					},
					{
						symbol: 'crousdt',
						title: 'CRO/USDT'
					},
					{
						symbol: 'trxusdt',
						title: 'TRX/USDT'
					}
				],
				makeListNum: 0,
				tabList01: [],
				tabList02: [],
				newsLastDetail: [],
				ch: {}, //实时数据
				// sort: true, //是否排序,
				config: [],
				userInfo: [],
				symbolsArrayTops: [],
				navLogo: null,
				t:null
			};
		},
		created() {
			console.log('locale', this.$i18n.locale)
			let _this = this;
			this.$nextTick(async () => {
				this.symbolsArray = await this.initMarketInfo();
				this.symbolsArrayTops = this.symbolsArray
				// // 只拿: WTI纽约原油, 纽约黄金, 富士中国A50
				// this.symbolsArrayTops = this.symbolsArray.filter((item) => {
				// 	if (item.symbol && (item.symbol == 'CL' || item.symbol == 'GC' || (item.symbol ==
				// 			'SI' && item.bi_id == 66))) {
				// 		return item
				// 	}
				// })
				// 掉换下位置
				// this.symbolsArrayTops.splice(0, 1, ...this.symbolsArrayTops.splice(2 - 1, 1, this
				// 	.symbolsArrayTops[0]))

				// vuex里先取出数据
				/*this.symbolsArray.forEach(item => {
			
				let d = this.$store.state.websocket.ch[`market.${item.symbol}.detail`];
				if (!d) return;
				this.$set(
				  d,
				  "change",
				  parseFloat(
					((d.tick.close - d.tick.open) / d.tick.open) * 100
				  ).toFixed(2)
				);
				this.$set(this.ch, `market.${item.symbol}.detail`, d);
			//     console.log(this.ch, "首页ch");
				if (this.makeListNum == 0) {
				  this.changeSort(this.ch);
				} else if (this.makeListNum == 1) {
				  this.amountSort(this.ch);
				}
			});*/

				/*
	  setTimeout(() => {
		console.log(_this.$futuresList)
		  
	  }, 500)*/
				// 定时查询
				// let Interval = setInterval(() => {
				// if (this.$store.state.websocket.is_open_socket) {
				this.loadTopMarket();
				// 已连接移除定时器
				// clearInterval(Interval);
				// }
				// }, 500);
			});
		},
		watch: {
			/*
			'futuresList': {
				handler: function() {
					let _this = this
					_this.revSocketData(_this.futuresList)
				}
			},*/
		},
		destroyed() {  
			clearInterval(this.t);
			this.t=null
			console.log('组件已被销毁');  
		}, 
		mounted() {
			this.initNewsLastInfo();
			this.initBannersInfo();
			$postAxios(api.getService, {}, res => {
				this.config = res.data;
				this.navLogo = this.$basePath + res.data.nav_url
			});
			this.it()
			//this.initinfo();
		},
		
		methods: {
			revSocketData(res) {
				console.log(res)
			},
			initinfo() {
				$postAxios(api.getUserInfo, {}, res => {
					if (res.code == 0) {
						this.userInfo = res.data;
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 签到
			signIn() {
				$postAxios(api.signIn, {}, res => {
					if (res.code == 0) {
						this.$toast(this.$t(res.msg));
						this.initinfo();
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			//跳转页面
			to(to, query) {
				let str = query.symbol.substring(7, query.symbol.length - 7);
				this.symbolsArray.forEach(item => {
					if (item.symbol == str) {
						this.$router.push({
							path: to,
							query: {
								symbol: item
							}
						});
					}
				});
			},
			// tab切换
			getClickFunc(val) {
				this.sort = val
				/*
				if (val == 0) {
					this.changeSort(this.ch);
				} else if (val == 1) {
					this.amountSort(this.ch);
				}*/
			}, //  涨幅排序
			changeSort(arrData) {
				// console.log(arrData, "arrData1");
				let keysSorted = Object.keys(arrData).sort(function(a, b) {
					return arrData[b].change - arrData[a].change;
				}); //  let keysSorted = Object.keys(arrData); // console.log(keysSorted, "tabList01");
				this.tabList01 = keysSorted;
			}, // 24H成交量排序
			amountSort(arrData) {
				// console.log(arrData, "arrData2");
				let keysSorted = Object.keys(arrData).sort(function(a, b) {
					return arrData[b].tick.amount - arrData[a].tick.amount;
				}); // let keysSorted = Object.keys(arrData); //排序健名 // console.log(keysSorted, "tabList02");
				this.tabList02 = keysSorted;
			},
			it(){
				//先发一遍请求
				$postAxios(api.getMarkets, {}, res => {
						if (res.code == 0) {
							this.futures = res.data
							console.log(this.futures,'res')
						} else {
							this.$toast(this.$t(res.msg));
						}
					});

				if(this.t){
					console.log('存在定时器')
					clearInterval(this.this.t)
					this.t = null;
				}
				this.t=setInterval(() => {
					$postAxios(api.getMarkets, {}, res => {
						if (res.code == 0) {
							this.futures = res.data
							console.log(this.futures,'res')
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				}, 2000);
				
			},
			// 获取首页滑动数据
			async initMarketInfo() {
				const result = await new Promise(resolve => {
					$postAxios(api.getMarket, {}, res => {
						if (res.code == 0) {
							let arr = res.data.map(item => {
								let obj = {
									symbol: item.code,
									note: item.EN_name,
									title: item.EN_name,
									cn_title: item.CN_name,
									bi_id: item.bi_id,
									is_zixuan: item.is_zixuan,
									img: item.img,
									is_ft: item.is_ft,
								};
								return obj;
							});
							resolve(arr);
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				});
				return result;
			},
			//  最新市场概要快照
			loadTopMarket() {
				let ids = [];
				this.symbolsArray.forEach(item => {
					ids.push(item.symbol);
					/*
        let ch = `market.${item.symbol}.detail`;
        // 消息回调
        EventBus.$on(ch, (res) => {
          if (!res.data) return;
          let d = res.data;
          d.change = parseFloat(
            ((d.tick.close - d.tick.open) / d.tick.open) * 100
          ).toFixed(2);
          this.$set(this.ch, res.data.ch, d);
          // console.log(this.ch, "ch");
        });*/
				});
				//不用ws
				// this.$socket.on('sub.futures.list@global', this.revData);
				// console.log(this.symbolsArray, "this.symbolsArray");
			},
			ratioSort(data) {
				let futures = Object.keys(data).sort(function(a, b) {
					return data[b].ratio - data[a].ratio;
				})
				this.futuresKeys = futures
			},
			increaseSort(data) {
				let futures = Object.keys(data).sort(function(a, b) {
					return data[b].increase - data[a].increase;
				})

				this.futuresIncreaseKeys = futures
			},
			revData(res) {
				this.futures = res
				if (this.sort == 0) {
					this.ratioSort(res)
				} else {
					this.increaseSort(res)
				}
			},
			// 获取最新公告
			initNewsLastInfo() {
				let data = {
					type: 1,
					language: String(this.$i18n.locale).toUpperCase()
				};
				$postAxios(api.getNotify, data, res => {
					if (res.code == 0) {
						this.newsLastDetail = res.data;
						// console.log(res.data);
						// this.$dialog.alert({
						//   title: this.$t("公告"),
						//   message: `${this.newsLastDetail.title} <br> ${this.newsLastDetail.editorValue}`,
						//   confirmButtonText: this.$t("关闭"),
						//   closeOnClickOverlay: true,
						// });
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 获取轮播图数据
			initBannersInfo() {
				$postAxios(api.getSlideList, {}, res => {
					if (res.code == 0) {
						this.bannerList = res.data;
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			// 跳转页面
			goOther(index) {
				if (index == 0) {
					this.$router.push('/switchLanguage');
				} else if (index == 1) {
					this.$router.push('/onlineService');
				} else if (index == 2) {
					this.$router.push('/helper');
				} else if (index == 3) {
					this.$router.push('/quotes');
				} else if (index == 4) {
					this.$router.push('/subscription');
				} else if (index == 5) {
					this.$router.push('/LockUpMining');
				} else if (index == 6) {
					this.$router.push('/news');
				} else if (index == 7) {
					this.$router.push('/recharge');
				} else if (index == 100) {
					window.location.href = this.config.miaoshu;
					return;
				}
			},
			// 跳转交易页面
			goDetail(item) {
				this.$router.push({
					path: '/trade',
					query: {
						symbol: item.symbol,
						id: item.bi_id
					}
				});
			},
			goDetail2(code) {
				let id = null;
				this.symbolsArray.forEach(item => {
					if (code == item.symbol) {
						id = item.bi_id
					}
				})

				if (!id) {
					return
				}

				this.$router.push({
					path: '/trade',
					query: {
						symbol: code,
						id: id
					}
				})
			},
			// 跳转最新公告详情页面
			goAnother(id) {
				this.$router.push('/newsDetail?id=' + id);
			}
		}
	};
</script>
<style scoped lang="scss">
	@mixin line($line: 1) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: $line;
		overflow: hidden;
		word-break: break-all;
	}

	.home {
		width: 100%;
		height: 100%;
		z-index: 1;
		position: relative;
		box-sizing: border-box;
		background-color: #25252f;

		.navBar {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 44px;
			z-index: 10000;
			border-bottom: 1px solid #e5e5e5;
			background-color: #fff;

			img {
				width: auto;
				height: 25px;
				display: block;
			}
		}

		.content {
			width: 100%;
			position: absolute;
			left: 0;
			// top: 44px;
			top: 0px;
			bottom: 54px;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;

			.qiandao {
				font-size: 14px;
				position: absolute;
				right: 20px;
				line-height: 20px;
				width: 80px;
				background-color: #2ebc83;
				text-align: center;
				color: #f0f0f0;
				border-radius: 10px;
				top: 4.6rem;
			}

			.innerTabBox {
				margin-top: 11px;

				.itemInner {
					margin-bottom: 11px;
					padding: 0 16px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.leftInner {
						color: #bac1d7;
						font-size: 14px;

						span {
							color: #303133;
							font-size: 15px;
							font-weight: 500;

							p {
								font-size: 10px;
								color: #888;
							}
						}
					}

					.rightInner {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.note {
							color: #303133;
							font-size: 14px;
							font-weight: 600;
						}

						.note.red {
							color: #cd4e65;
						}

						.note.green {
							color: #2ebc83;
						}

						.num {
							margin-left: 22px;
							padding: 8px;
							width: 104px;
							color: #fff;
							font-size: 15px;
							text-align: center;
							border-radius: 5px;
							box-sizing: border-box;
							background-color: #2ebc83;

							&.red {
								background-color: #cd4e65;
							}
						}
					}
				}
			}

			.subTabBox {
				.itemInner {
					.rightInner {
						.note.green {
							color: #00abff;
						}

						.num {
							background-color: #00abff;
						}
					}
				}
			}

			.bannerBox {
				margin: 0px;

				// margin: 10px 13px 35px;
				.my-swipe {
					width: 100%;

					.swipeItem {
						height: 170px;
						// border-radius: 10px;
						border-radius: 0px;

						::v-deep.van-image {
							img {
								border-radius: 0px;
								// border-radius: 10px;
							}
						}
					}

					::v-deep.van-swipe__indicator--active {
						width: 18px;
						border-radius: 20px;
					}
				}
			}

			.linkBox {
				margin: 10px 0;
				display: flex;
				align-items: start;
				justify-content: start;
				flex-wrap: wrap;

				.itemBox {
					margin: 10px 0;
					width: 33%;
					flex-shrink: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					img {
						margin-bottom: 5px;
						width: auto;
						height: 45px;
						display: block;
					}

					p {
						color: #303133;
						font-size: 12px;
						text-align: center;
					}
				}
			}

			.topInner {
				padding: 20px 15px;
				width: 100%;
				background-color: #21212b;
				box-sizing: border-box;

				// background: #f2f2fc url('../assets/images/bg03.png') no-repeat center center;
				// background-size: 100% auto;
				p {
					// text-align: center;
				}

				.topInnerBox {
					width: 100%;
					background-color: #25252f;
					height: 71px;
					display: flex;
					padding: 0px 15px;
					border-radius: 5px;
					box-sizing: border-box;
					align-items: center;
					justify-content: space-between;
				}

				.topInnerLeft {
					display: flex;
					align-items: center;

					img {
						width: 38px;
						height: 34px;
						margin-right: 10px;
					}
				}

				img:last-child {
					width: 26px;
					height: 26px;
				}

				.title {
					margin-bottom: 3px;
					color: #d5d7d0;
					font-weight: 600;
					font-size: 16px;
				}

				.note {
					color: #828095;
					font-size: 14px;
				}
			}

			.topInner2 {
				width: 100%;
				height: 90px;
				box-sizing: border-box;
				border-radius: 10px;
				padding-left: 10px;
				padding-right: 10px;
				background: url('../assets/images/en-xb.png') no-repeat center center;
				background-size: 95% auto;
			}

			.swipeTextInner {
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				// border-bottom: 10px solid #21212b;
				img {
					margin-right: 5px;
					width: auto;
					height: 21px;
					display: block;
				}

				.notice-swipe {
					flex: 1;
					flex-shrink: 0;

					.swipeItem {
						height: 20px;
						@include line(1);
						text-align: left;
						color: #303133;
						font-size: 12px;
						line-height: 20px;
						box-sizing: border-box;
					}
				}
			}

			.dataBox {
				padding-top: 10px;
				/*padding: 10px 0;
			border-bottom: 10px solid #f2f2fc;*/
				background-color: #f2f2fc;

				.contentInner {
					width: 100%;
					height: 90px;

					/*overflow-x: auto;*/
					.subInner {
						width: 100%;
						height: 100%;
						/*white-space: nowrap;*/
						display: flex;
						justify-content: space-evenly;
					}

					&::-webkit-scrollbar {
						height: 0px;
					}

					.item {
						margin-bottom: 10px;
						padding: 10px;
						width: 26%;
						border-radius: 10px;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						/*
					box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1);*/
						background-color: #fff;

						p {
							text-align: center;
						}

						/*&:last-child {
						margin: 0 15px;
					}*/
						.title {
							margin-bottom: 5px;
							color: #333;
							font-size: 14px;
							font-weight: 500;

							span {
								color: #777;
								font-size: 10px;
								font-weight: 600;
							}
						}

						.number {
							margin-bottom: 5px;
							color: #cd4e65;
							font-size: 12px;
							font-weight: 600;

							&.green {
								color: #1cad90;
							}
						}

						.text {
							color: #cd4e65;
							font-size: 10px;
							font-weight: normal;

							&.green {
								color: #1cad90;
							}
						}
					}
				}
			}
		}
	}

	.itemInnerList {
		width: 95%;
		padding: 0px 10px;
		box-sizing: border-box;
		display: flex;
		margin: 0 auto;
		align-items: center;
		justify-content: space-between;
		background-color: #262630;
		flex-wrap: wrap;

		.itemInnerListIt {
			margin: 30px 0px 0;
			width: 46.5%;

			.dkshfImg {
				width: 100%;
				height: 150px;
				display: flex;
				align-items: center;

				img {
					width: 100%;
					height: auto;
					border-radius: 5px;
				}
			}

			.itemInnerListItone {
				width: 100%;
				color: #fff;
				font-size: 12px;
				font-weight: 600;
				margin-top: 20px;
			}

			.itemInnerListIttow {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #fff;
				font-size: 12px;
				font-weight: 600;
				margin-top: 5px;

				.number {
					margin-bottom: 5px;
					color: #ff0105;
					font-size: 12px;
					font-weight: 600;

					&.green {
						color: #26a848;
					}
				}

				.text {
					color: #ff0105;
					font-size: 10px;
					font-weight: normal;

					&.green {
						color: #26a848;
					}
				}
			}
		}
	}
</style>